22 / 03 / 03

博客写作攻略 --Hexo+Github+Netlify+CMS

本文转载自：https://noby.in/blogdesign

为什么说这是最佳实践？

如果你跟我一样也是一个追求极致的人，希望自己的博客面面俱到，在线编辑 (这是最主要的), 主题丰富 , 支持高度自定义 , 国内访问快 , 那么这个方案我觉得是最佳实践。

为什么使用 Hexo?

Jekyll

jekyll 是一个简单的免费的 Blog 生成工具，类似 WordPress。但是和 WordPress 又有很大的不同，原因是 jekyll 只是一个生成静态网页的工具，不需要数据库支持。但是可以配合第三方服务，例如 discuz。最关键的是 jekyll 可以免费部署在 Github 上，而且可以绑定自己的域名。

Hugo

Hugo 是 Go 编写的静态网站生成器，速度快，易用，可配置。Hugo 有一个内容和模板目录，把他们渲染到完全的 HTML 网站。Hugo 依赖于 Markdown 文件，元数据字体 。用户可以从任意的目录中运行 Hugo，支持共享主机和其他系统。

Hexo

Hexo 是一个基于 nodejs 的静态博客网站生成器，作者是来自台湾的 Tommy Chen。

特点：

  • 不可思议的快速 ─ 只要一眨眼静态文件即生成完成
  • 支持 Markdown
  • 仅需一道指令即可部署到 GitHub Pages 和 Heroku
  • 已移植 Octopress 插件
  • 高扩展性、自订性
  • 兼容于 Windows, Mac & Linux

Gridea

上手极快，操作简便，适合小白，但处在萌新阶段，功能不成熟。

个人原因

主要还是喜欢 hexo 的 next 主题，同时该主题的高度自定义和丰富的插件，让喜欢折腾的人能够很满意，所以还是选择使用 hexo, 不过现在大家好像都在往 hugo 上迁移，据说网站生成速度快，但是主题比较单一，所以暂时放弃。

为什么托管到 Github?

因为大部分的博客渲染工具 (hexo, hugo, gridea) 都是依赖于 github, 国内的 coding page 无论是从稳定性还是操作便捷程度都不及 github, 推送代码还有广告，而这完全取决与你的氪金程度。所以还是推荐使用 github 托管。可能你会说 coding page 在国内访问快，但是单单这一个优势无法称作是最佳实践，而且下文的 netlify 会解决这一系列的问题，先按下不表。

最重要的是我们把 github 仅仅作为博客的托管仓库，不使用它的 github page 部署

为什么使用 Netlify?

先说一下它的功能:

  • 可以托管静态资源
  • 可以将静态网站部署到 CDN 上，加速国内访问
  • Continuous Deployment 持续部署 , 当你提交改变到 git 仓库，它就会自动运行 build command, 进行自动部署
  • 可以添加自定义域名
  • 可以启用免费的 TLS 证书，启用 HTTPS
  • 最强大的 cms, 用来管理静态资源
  • 自带 CI、支持自定义页面重定向、自定义插入代码、打包和压缩 JS 和 CSS、压缩图片、处理图片

github page:

  • github 虽然没有被墙，但是那个访问速度非常的慢，对国内访问的用户来说体验极差
  • 百度无法抓取，众所周知国内用百度的还是多，如果你写的文章，无法被百度抓取收录，那还是有点坑的
  • 无法做 CDN 加速。未备案域名服务器，无法使用国内的 cnd 加速服务

Netlify 与 Travis CI 的区别:

  • 我们可以看到使用 Netlify 可以轻松的帮你自动持续部署博客，也就是说，他会自动检测到你的博客源码的更改，自动执行 hexo d+ hexo g.
  • Netlify 与 Travis CI 等等都是持续集成工具，但是它更加关注前端，或者说网站或者 web app 的持续集成与持续部署，这也是它与其他持续集成工具最大的区别。目前对于 Netlify 的使用也非常简单，但是这是其他持续集成工具没有的.

所以说使用了 Netlify, 就等于替代了 GithubPage+ Travis CI. 并且比较完美的弥补了两者的不足.

ps: 我在查询相关的资料的时候发现有的博客的做法是把源码和渲染后的网页放在两个分支 (这也是 hexo 提倡的做法), 但是却只是让 netlify 托管渲染后的分支，这样的话 netlify 无法做到自动部署，此时的 netlify 仅仅是充当了 githubpage 的角色

为什么使用 Netlify CMS?

什么是 CMS?

内容管理系统（英语：content management system，缩写为 CMS）是指在一个合作模式下，用于管理 工作流程的一套制度。该系统可应用于手工操作中，也可以应用到电脑 或网路 里。作为一种中央储存器（central repository），内容管理系统可将相关内容集中储存并具有群组管理、版本控制等功能。版本控制 是内容管理系统的一个主要优势。

Netlify CMS 的优势

  • 我们可以通过 Netlify CMS 来在线编辑我们的文章，而不用在本地比较繁琐的操作
  • 虽然它是作为一款团队的编辑工具，但作为轻量的博客编辑，我们可以暂时把他定位为个人的在线编辑工具，这样的话你可以随时随地修改，编辑你的博客，而不用考虑多设备如何同步的问题.
  • Netlify CMS 提供 Hexo 的插件，可以简单的开启你的 Netlify CMS 服务

部署 Hexo 相关操作

由于关于 hexo 的部署文章已经是很多了，同时自己也是从网上看到详尽优质的 hexo 部署教程此处不再阐述如何进行 hexo 的部署。提供相关的链接如下:

Hexo 官方指南

NexT 主题

Git Pages 使用指南

打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化

部署 Netlify 的操作流程

首先肯定是去注册 ，推荐直接用 GitHub 的帐号，然后按照提示授权、选仓库，部署参数如图:

img

部署环境设置:

img

第一次部署好后，会让你设置域名，直接输入自己的域名，然后默认即可。接下来设置 DNS，如下图:

img

然后按提示，去你的域名服务商的管理界面将域名服务器（DNS 服务器）修改为 Netlify 提供的地址，如下图：

img

接下来设置 HTTPS，这个其实 Netlify 是会自动为我们设置的，但是由于域名服务器的缓存原因（更改的 DNS 不能及时生效），这个时间可能会需要很久，因此可以去文档 中提到的 Google 的这个网站 去清空缓存，以加速这一过程。

img

其他设置压缩 css,js , 图片以加速访问:

img

至此，我们的 netlify 部署成功，

可查看自动部署状态:

img

Netlify CMS 操作记录

添加依赖

在 hexo 的文件夹中左键菜单打开 git bash

img

输入以下内容：

yarn add hexo-netlify-cms
// or npm
npm i hexo-netlify-cms --save

在 hexo 的 config 配置文件 (非 next 主题配置) 中新增以下内容

netlify_cms:
  config_file: netlify.yaml

在 hexo 根目录新建 netlify.yaml 文件，添加以下内容

backend:
  name: git-gateway
  branch: master

media_folder: source/images
public_folder: /images
publish_mode: editorial_workflow

# pages auto generate
pages: 
  enabled: true
  # over page collection config
  # if fields not set, would use posts fields config
  config:
    label: "Page"
    delete: false
    editor:
      preview: true
    # fields: 
# through hexo config over fields
over_format: true
scripts:
  - js/cms/youtube.js
  - js/cms/img.js

# A list of collections the CMS should be able to edit
collections:
  # Used in routes, ie.: /admin/collections/:slug/edit
  - name: "posts"
    # Used in the UI, ie.: "New Post"
    label: "Post"
    folder: "source/_posts" # The path to the folder where the documents are stored
    sort: "date:desc"
    create: true # Allow users to create new documents in this collection
    editor:
      preview: true
    fields: # The fields each document in this collection have
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD HH:mm:ss", dateFormat: "YYYY-MM-DD", timeFormat: "HH:mm:ss", required: false}
      - {label: "Updeted Date", name: "updated", widget: "datetime", format: "YYYY-MM-DD HH:mm:ss", required: false}
      - {label: "Tags", name: "tags", widget: "list", required: false}
      - {label: "Categories", name: "categories", widget: "list", required: false}
      - {label: "Body", name: "body", widget: "markdown", required: false}
      - {label: "Permalink", name: "permalink", widget: "string", required: false}
      - {label: "Comments", name: "comments", widget: "boolean", default: true, required: false}

在 Netlify 中开启服务

开启服务：

img

添加 netlify-identity-widget.js, 代码如下 <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

img

同时为了不使你的文章被任意修改，设置为仅邀请模式:

img

你可以发送带有权限的邮件邀请，上限为 5 人。同时，你也可以添加使用 github 账号登录的选项:

img

完成后你可以在你的网站后添加后缀 /admin, 便进入了在线编辑界面 (你也可以像我一样做一个按钮放在博客侧边栏上来更加简便操作)

img

img

参考链接:

将 Hexo 静态博客部署到 Netlify

Hexo Netlify CMS

存在的不足

  • 使用 Netlify 后，如果你再想在本地编辑文章的话，最好就是先把 github 上全部 pull 下来后，再编辑文章。

    git fetch --all && git reset --hard origin/master && git pull

    该命令是从远端仓库 pull 下来后，强制覆盖本地 , 因为远程仓库被 netlify 自动部署后和本地的仓库内容会出现不同。

  • 完成后仅仅推送就可以，不是用 hexo-g-d 而是 git add ./ && git commit -m, 单单推送文章修改，让 netlify 自动部署。

未完待续

Powered by Gridea